/**
 * @file 学部看板报表
 * @author ruanairuo(ruanairuo@baijia.com)
 * @date 2020-03-18
 */
import React, {useEffect, useState} from 'react';
import {Card, Row, Col} from 'antd';
import CommonCardTable from '~/page/FineBi/common/CardTable';
import DetailModal from '~/page/FineBi/common/DetailModal';

import {queryDetail, download, queryValues} from '~/service/refundReport';

import {COLOR} from './config';

export default function ColorTable(props) {
    const {dimensionAndValues, dId, unitId} = props;
    const [result, setResult] = useState({});
    const [loading, setLoading] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [detailData, setDetailData] = useState({});

    const getData = () => {
        const dashBoard = [
            {
                dashBoardName: dId,
                dashBoardId: dId
            }
        ];
        const dimension = [...dimensionAndValues];
        const param = {
            dimensionAndValues: dimension,
            dashBoardList: dashBoard
        };
        setLoading(true);
        queryValues(param)
            .then(res => {
                const resultData = res?.data[dId] ?? null;
                if (resultData) {
                    setResult(resultData[unitId]);
                }
                else {
                    setResult();
                }
            })
            .finally(() => {
                setLoading(false);
            });
    };

    const handleRender = text => {
        let color = '';
        const textValue = parseFloat(text);
        const colorValue = COLOR.find(ele => textValue >= ele[0] && textValue < ele[1]);
        if (colorValue) {
            color = colorValue[2];
        }
        if (textValue >= 100) {
            color = '#19304D';
        }
        return (
            <div style={{backgroundColor: color, marginRight: 1}} className="color-text-cell">
                <span style={{marginLeft: 8, color: color && '#FFF'}}>
                    {text}
                </span>
            </div>
        );
    };

    useEffect(() => {
        getData();
    }, [dimensionAndValues]);

    const handleDownload = () => {
        const dimension = [...dimensionAndValues];
        const params = {
            unitId,
            dimensionAndValues: dimension
        };
        const excelName = result?.unitName ? result?.unitName : null;
        download(params, excelName);
    };

    const handleDetail = () => {
        setModalVisible(true);
        const dimension = [...dimensionAndValues];
        const params = {
            unitId,
            dimensionAndValues: dimension
        };
        queryDetail(params).then(res => {
            const {data} = res;
            setDetailData(data);
        });
    };

    return (
        <div>
            <Card>
                <Row>
                    <Col span={24}>
                        <CommonCardTable
                            {...props}
                            unitId={result?.unitId}
                            unitName={result?.unitName}
                            data={result}
                            loading={loading}
                            span={24}
                            render={handleRender}
                            tableProps={{pagination: false, rowClassName: () => 'color-table-row', scroll: {y: 500}}}
                            showBtn={false}
                            onDetail={handleDetail}
                            onDownload={handleDownload}
                        />
                    </Col>
                </Row>
            </Card>
            <DetailModal data={detailData} detailModalVisible={modalVisible} onCancel={() => setModalVisible(false)} />
        </div>
    );
}
